/**
 * Script of the Top 20 Page
 */
var PageTop20 = new (function() {
	var $this = this;
	var videosDisplayed = [];
	
	var loading = false;
	var haveError = false;
	
	var ajax;
	
	/**
	 * Initialization
	 * Load the last status saved
	 */
	this.init = function(e, data) {
		

		loadTop20();
		
		if (!videosDisplayed.length) {
			$this.searchVideos();
		}
	}
	
	/**
	 * Search videos in a certain top
	 */
	this.searchVideos = function() {
		var typeTop = $("#type-top").val();
		
		if (ajax) {
			ajax.abort();
			ajax = null;
		}
		
		loading = true;
		haveError = false;
		
		
		updateListView();
		
		ajax = $.ajax({
			url: MikuClip.URL.WEBSERVICE_VIDEOS_RANK,
			data: {type: typeTop, login: MikuClip.options.login, password: MikuClip.options.password},
			success: function(data) {
				try {
					var o = JSON.parse(data);
					
					
					saveTop20();
					if (o.error_type && o.error_type == "connection") {
						DialogConnectMikubook.setError(o.error);
						DialogConnectMikubook.show();
					}
					else {
						var videos = o.videos;
						$("#page-top20 #last-update").html(o.lastupdate);
						
						clearListView();
						for (var i = 0; i < videos.length; i++) {
							addToListView(videos[i]);
							videosDisplayed.push(videos[i]);
						}
						
						loading = false;
						updateListView();
					}
				}
				catch (e) {
					onError({statusText: 'parsing_error'});
				}
			},
			error: onError
		});
	}
	
	/**
	 * Error occured (403, 404, ...) or parsing error
	 */
	function onError(e) {
		loading = false;
		if (e.statusText != "abort") {
			haveError = true;
		}
		ajax = null;
		updateListView();
	}
	
	/**
	 * Click on the refresh button
	 */
	function onRefresh() {
		videosDisplayed = [];
		$("#page-top20 #listview .video-item").remove();
		$this.searchVideos();
	}

	/**
	 * Save the current status of the page (video loading, videos displayed, offset)
	 */
	function saveTop20() {
		window.localStorage['page_top20'] = JSON.stringify({
			'typeTop': $("#type-top").val(),
			'videos': videosDisplayed,
			'loading': loading,
			'lastUpdate': $("#page-top20 #last-update").html()
		});
	}
	
	/**
	 * Load the saved status of the page
	 */
	function loadTop20() {
		if (window.localStorage['page_top20']) {
			var o = JSON.parse(window.localStorage['page_top20']);
			$("#type-top").val(o.typeTop);
			$("#page-top20 #last-update").html(o.lastUpdate);
			videosDisplayed = [];
			
			loading = o.loading;
			if (loading) {
				$this.searchVideos();
			}
			else {
				clearListView();
				for (var i = 0; i < o.videos.length; i++) {
					addToListView(o.videos[i]);
					videosDisplayed.push(o.videos[i]);
				}
				updateListView();
			}
			
			
		}
	}
	
	/**
	 * Update the main listview (more element, loading, error, no videos)
	 */
	function updateListView() {
		if (loading) {
			$("#page-top20 #listview-loader-top").css("display", "block");
		}
		else {
			$("#page-top20 #listview-loader-top").css("display", "none");
		}
	
	
		if (!haveError && !videosDisplayed.length && !loading) {
			$("#page-top20 #listview-item-notfound").css("display", "block");
		}
		else {
			$("#page-top20 #listview-item-notfound").css("display", "none");
		}
		
		if (haveError) {
			$("#page-top20 #listview-item-error").css("display", "block");
		}
		else {
			$("#page-top20 #listview-item-error").css("display", "none");
		}		
		
		refreshListView();
	}
	
	/**
	 * Clear the main list view
	 */
	function clearListView() {
		$("#page-top20 #listview .video-item").remove();
		refreshListView();
	}
	
	/**
	 * Add an video to listview
	 */
	function addToListView(videodata) {
		var video = new VideoItem(videodata);
		$("#page-top20 #listview").append(video.dom);
		refreshListView();
	}
	
	/**
	 * Refresh the JQuery Mobile Widget, if loaded
	 */
	function refreshListView() {
		try {
			$("#page-top20 #listview").listview('refresh');
		} catch(e) {
		}
	}	

	
	
	$("body").on("pagebeforeshow", "#page-top20", this.init);
	$("#page-top20").on("change", "#type-top", this.searchVideos);
	$("#page-top20").on("click", "#btn-refresh", onRefresh);
});